<template>
  <van-tabs v-model:active="active">
    <van-tab title="路由跳转">
      <router-link to="/Detail"> 详情页</router-link>
    </van-tab>
    <van-tab title="接口请求">
      <van-cell v-for="(item, index) in listData" :key="index" :title="item.name" icon="location-o" />
    </van-tab>
    <van-tab title="vuex">
      <h1>初始值：{{ initage }}</h1>
      <button @click="changeStoreSta">更改vuex-state值+1</button>
      <h1>chnage值：{{ nextAge }}</h1>
    </van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { defalutList } from '@/utils/interface';
import { ref, computed } from 'vue';
import { getListAxios } from '@/api/user';
const active = ref(2);
let listData = ref<defalutList[]>([]);
getListAxios().then(res => {
  let resData: any = res;
  listData.value = resData;
});
//vuex
import { useStore } from 'vuex';
const store = useStore();
console.log(store.state);
const initage = store.state.age;
const changeStoreSta = () => {
  store.commit('add')
};
const nextAge = computed(() => store.getters.getage); // 响应改变
</script>
<style scoped></style>
